<template>
 <div class="shang">
    <div class="shangbox">
        <div class="text">
            用卡服务
        </div>
        <div class="listbox">
            <div v-for="(v,i) in newanquan" :key="i">
               <img :src="v.imgurl" alt="">
               <p>{{v.title}}</p>
            </div>
            
        </div>
    </div>
  </div>
</template>

<script>
export default {
   computed:{
        newanquan(){    
            return this.$store.state.card.iconobj.slice(19,41)
        }
    }
}
</script>

<style scoped lang="scss">
 .shang{
        width: 100%;
        height: 100%;
        background-color: white;
        .shangbox{
            width: 90%;
            margin: auto;
        .text{
            width: 100%;
            font-size: 0.18rem;
            font-weight: 700;
            margin-top: 0.1rem;
        }
        .listbox{
            width: 100%;
            
            display: flex;
            flex-wrap: wrap;
            div{
                width: 25%;
                text-align: center;
                
                img{
                    width: 60%;
                    
                    vertical-align: 0.05rem;
                }
                p{
                    font-size: 0.16rem;
                }
            }
        }
        }
    }
</style>